<!--
 * @Author: your name
 * @Date: 2021-12-16 10:18:12
 * @LastEditTime: 2021-12-24 17:06:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \app\src\views\el\scrollbar\index.vue
-->

<template>
  <el-scrollbar
    :wrap-class="`xgm-scrollbar-wrapper ${scrollbarClass}`"
    class="xgm-scrollbar"
  >
    <slot> </slot>
  </el-scrollbar>
</template>

<script>
export default {
  name: "scrollbar",
  props: {
    scrollbarClass: {
      default: "",
      type: String,
    },
    listenScroll: {
      type: Boolean, // 监听滚动
      default: false,
    },
  },
  mounted() {
    if (this.listenScroll) this.scroll();
  },
  methods: {
    scroll() {
      this.scrollEl = this.$el.childNodes[0];
      this.scrollEl.addEventListener(
        "scroll",
        (e) => {
          this.$emit("scroll", e.target);
        },
        false
      );
    },
  },
  beforeDestroy() {
    if (this.listenScroll && this.scrollEl)
      this.scrollEl.removeEventListener("scroll", () => {}, false);
  },
};
</script>

<style lang="less" scoped>
.el-scrollbar.xgm-scrollbar {
  height: 100%;
  /deep/.el-scrollbar__wrap.xgm-scrollbar-wrapper {
    margin: 0 !important;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
  }
}
</style>